var app = new Vue({
	el: "#app",
	data: {
		allProductAmount:0,//总价
		todaycount: 0,
		monthcount: 0,
		monthmoney: 0,
		todaymoney: 0,
		datacount: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		lastSevenDays: [120, 200, 150, 80, 70, 110, 130],
		todayOrderList: [{
				orderid: 1,
				userUrl: '../img/logo.png', // 用户头像
				userName: '测试1', // 用户名
				ADDDATE: '2025-08-12 12:10:20', // 下单时间
				orderstatus: 1 // 订单状态【1表示待配送 2表示待收货 3表示已完成】
			},
			{
				orderid: 2,
				userUrl: '../img/logo1.png', // 用户头像
				userName: '测试2', // 用户名
				ADDDATE: '2025-08-12 12:10:20', // 下单时间
				orderstatus: 1 // 订单状态【1表示待配送 2表示待收货 3表示已完成】
			}
		],
		// 新增订单详情弹窗相关数据
		showDetailDialog: false, // 控制弹窗显示/隐藏
		currentOrder: null // 当前查看的订单详情数据
	},
	methods: {
		dataOption() {
			var myChart = echarts.init(document.getElementById('myChart'));
			option = {
				xAxis: {
					type: 'category',
					data: this.lastSevenDays
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: this.datacount,
					type: 'bar'
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},
		getcountdayandmonth() {
			axios.get("http://localhost:8887/ordercake/getcountdayandmonth").then(res => {
				this.todaycount = res.data.data.todaycount;
				this.monthcount = res.data.data.monthCount;
				this.todaymoney = res.data.data.todaymoney==null?0:res.data.data.todaymoney;
				this.monthmoney = res.data.data.monthmoney;
			})
		},
		initData() {
			//悬浮数据
			let then = this
			//获取计算总数
			this.getcountdayandmonth()
			this.getdata();

		},
		//获取七日订单量数据
		async getdata() {
			await axios.get("http://localhost:8887/ordercake/getdata").then(res => {
				this.datacount = res.data.data.datacount
				this.lastSevenDays = res.data.data.lastSevenDays
				
				console.log("获取七日订单量数据");
				console.log(res);
				console.log(res.data.data.datacount);
				console.log(res.data.data.lastSevenDays);
			});
			
			this.dataOption()
		},
		async fetchOrderData() {
			await axios.get("http://localhost:8887/ordercake/selectTodayOrder").then(res => {
				// 将后端返回的订单数据赋值给 todayOrderList
				this.todayOrderList = res.data.data.ordercakeList;
				console.log("获取到的今日订单数据：")
				console.log(res.data.data.ordercakeList);
			});

		},
		// 接单操作
		handleReceive(order) {
			console.log("接单操作，订单ID：", order.orderid);
			// 点击接单修改订单状态为2，传递订单ID给后端
			axios.post("http://localhost:8887/ordercake/updateGoods?orderid=" + order.orderid).then(res => {
				if (res.data > 0) { // 假设后端返回受影响行数，大于0表示成功
					// 弹出提示
					this.$message({
						message: '接单成功！',
						type: 'success',
						duration: 2000,
						showClose: true
					});

					console.log("接单成功，订单状态已修改");
					// 重新获取订单数据，更新页面显示
					this.fetchOrderData();
				} else {
					console.log(res);
					console.log("接单失败");
				}
			}).catch(err => {
				console.error("调用接单接口出错：", err);
			});
		},
		// 查看订单详情按钮 - 新增完整逻辑
		handleViewDetail(order) {
			console.log("查看订单详情，订单ID：", order.orderid);
			// 显示弹窗
			this.showDetailDialog = true;
			// 调用接口查询订单详情
			this.getOrderDetailById(order.orderid);
		},
		// 关闭订单详情弹窗 - 新增
		closeDetailDialog() {
			this.showDetailDialog = false;
			this.currentOrder = null; // 清空订单数据
		},
		// 查询订单详情接口 - 新增
		getOrderDetailById(orderId) {
			// 调用后端订单详情接口
			axios.get(`http://localhost:8887/orderdetail/${orderId}`)
				.then(response => {
					if (response.data.code === 200) {
						this.currentOrder = response.data.data;
						this.allProductAmount = this.currentOrder.orderprice + this.currentOrder.money - 
						this.currentOrder.deliverypay;
						console.log("orderprice:", this.currentOrder.orderprice);
						console.log("获取订单详情成功：", this.currentOrder);
					} else {
						this.$message.error('获取订单详情失败：' + (response.data.message || '未知错误'));
						this.closeDetailDialog(); // 关闭弹窗
					}
				})
				.catch(error => {
					console.error('查询订单详情失败：', error);
					this.$message.error('网络错误，获取订单详情失败');
					this.closeDetailDialog(); // 关闭弹窗
				});
		},
		//播放音频
		audioPlay() {
			const audio = document.getElementById("myAudio");
			// 重置播放位置确保每次点击都能播放
			audio.currentTime = 0;
			audio.play().catch(e => {
				console.error("播放失败:", e);
			});
		}
	},
	mounted() {
		const then = this;
		//连接websocket
		var websocket = null;
		//判断当前浏览器是否支持WebSocket
		if ('WebSocket' in window) {
			// 添加 clientType=pc 标识
			websocket = new WebSocket("ws://localhost:8887/websocket?clientType=pc");

			websocket.onopen = function() {
				console.log("PC客户端连接成功");
			};

			websocket.onmessage = function(event) {
				console.log("收到消息:", event.data);
				// 处理订单消息
				if (event.data.includes("订单")) {
					// 调用方法
					then.audioPlay();
					// 查询订单
					then.fetchOrderData();
				}
			};

			websocket.onclose = function() {
				console.log("连接关闭，5秒后重连");
				setTimeout(() => then.mounted(), 5000); // 重连逻辑
			};

			websocket.onerror = function(err) {
				console.error("WebSocket错误:", err);
			};

		} else {
			alert('浏览器不支持WebSocket');
		}

		this.dataOption();
		this.initData();
		// 订单数据
		this.fetchOrderData();
	}
})

const audio = document.getElementById('myAudio');
const playBtn = document.getElementById('playButton');

// 点击按钮切换播放/暂停
playBtn.addEventListener('click', () => {
	if (audio.paused) {
		audio.play();
	} else {
		audio.pause();
	}
});